<template>
  <div>
    <div class="popular">
      <router-link :to="`/playlist?cat=${cat}`" style="font-size:24px;color:black">{{ cat }}</router-link>
      <!-- 123 -->
       <el-menu
      class="el-menu-demo"
      mode="horizontal"
      text-color="#999"
      background-color="#e3e4e5"
    >
      <el-menu-item
      class="el-menu-item"
        v-for="(mitem, mindex) in menuList"
        :key="mindex"
        :index="mitem.index"
      >
        <el-dropdown @command="onClick" v-if="mitem.menu">
          <span class="el-dropdown-link" v-text="mitem.menuItem">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-container v-for="(items, index) in mitem.menu" :key="index">
              <el-main>
                <el-dropdown-item
                  v-if="items.sortTitle"
                  v-text="items.sortTitle"
                  disabled
                  class="dropdown-sortTitle"
                >
                </el-dropdown-item>
                <el-dropdown-item
                  v-for="(a, aindex) in items.dropdownItem"
                  :key="aindex"
                  :command="a.link"
                  v-text="a.title"
                ></el-dropdown-item>
              </el-main>
            </el-container>
          </el-dropdown-menu>
        </el-dropdown>
        <span
          class="el-dropdown-link"
          v-text="mitem.menuItem"
          slot="title"
          v-else
          @click="onClick(mitem.url)"
        >
        </span>
      </el-menu-item>
    </el-menu>
<!-- 123 -->
      <!-- <el-select
        v-model="value"
        placeholder="选择分类"
        size="small"
        style="width: 120px; margin-left: 20px;"
        :popper-append-to-body="false" clearable
        @change="jumpto"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.cat"
          :value="item.value"
        ></el-option>
      </el-select> -->
      <span class="more">
        <router-link :to="`/playlist?cat=${cat}&order=hot`" style="color:#fff">热门</router-link>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cat"],
  data() {
    return {
      // 123
      activeIndex: "1",
      menuList: [
        {
          index: "1",
          menuItem: "歌单选项",
          menu: [
            {
              sortTitle: "语种",
              dropdownItem: [
                { title: "华语", link: "/playList/?cat=华语" },
                { title: "日语", link: "/playList/?cat=日语" },
                { title: "韩语", link: "/playList/?cat=韩语" },
                { title: "粤语", link: "/playList/?cat=粤语" },
                { title: "欧美", link: "/playList/?cat=欧美" },
              ],
            },
             {
              sortTitle: "场景",
              dropdownItem: [
                { title: "清晨", link: "/playList/?cat=清晨" },
                { title: "夜晚", link: "/playList/?cat=夜晚" },
                { title: "学习", link: "/playList/?cat=学习" },
                { title: "工作", link: "/playList/?cat=工作" },
                { title: "午休", link: "/playList/?cat=午休" },
                { title: "下午茶", link: "/playList/?cat=下午茶" },
                { title: "地铁", link: "/playList/?cat=地铁" },
                { title: "驾车", link: "/playList/?cat=驾车" },
              ],
            },
            {
              sortTitle: "风格",
              dropdownItem: [
                { title: "流行", link: "/playList/?cat=流行" },
                { title: "摇滚", link: "/playList/?cat=摇滚" },
                { title: "民谣", link: "/playList/?cat=民谣" },
                { title: "电子", link: "/playList/?cat=电子" },
                { title: "舞曲", link: "/playList/?cat=舞曲" },
                { title: "说唱", link: "/playList/?cat=说唱" },
                { title: "朋克", link: "/playList/?cat=朋克" },
                { title: "古典", link: "/playList/?cat=古典" },
                { title: "乡村", link: "/playList/?cat=乡村" },

              ],
            },
            {
              sortTitle: "情感",
              dropdownItem: [
                { title: "怀旧", link: "/playList/?cat=怀旧" },
                { title: "清新", link: "/playList/?cat=清新" },
                { title: "浪漫", link: "/playList/?cat=浪漫" },
                { title: "伤感", link: "/playList/?cat=伤感" },
                { title: "治愈", link: "/playList/?cat=治愈" },
                { title: "放松", link: "/playList/?cat=放松" },
                { title: "孤独", link: "/playList/?cat=孤独" },
              ],
            },

            {
              sortTitle: "主题",
              dropdownItem: [
                { title: "综艺", link: "/playList/?cat=综艺" },
                { title: "影视原声", link: "/playList/?cat=影视原声" },
                { title: "ACG", link: "/playList/?cat=ACG" },
                { title: "儿童", link: "/playList/?cat=儿童" },
                { title: "校园", link: "/playList/?cat=校园" },
                { title: "游戏", link: "/playList/?cat=游戏" },
                { title: "网络歌曲", link: "/playList/?cat=网络歌曲" },
              ],
            },
          ],
        },

      ],
      // 123
      // options: [
      //   {
      //     value: "华语",
      //     cat: "华语",
      //   },
      //   {
      //     value: "流行",
      //     cat: "流行",
      //   },
      //   {
      //     value: "民谣",
      //     cat: "民谣",
      //   },
      //   {
      //     value: "摇滚",
      //     cat: "摇滚",
      //   },
      //   {
      //     value: "电子",
      //     cat: "电子",
      //   },
      //   {
      //     value: "说唱",
      //     cat: "说唱",
      //   },
      //   {
      //     value: "清新",
      //     cat: "清新",
      //   },
      // ],
      // value: "",
    };
  },
  watch: {
    // cat(){
    //   this.cat
    // },
    value(newName, oldName) {
      console.log(newName);
      // this.jumpto(newName)
    },
  },
  mounted () {
    console.log(this)
  },
  methods:{
    jumpto(item){
      // console.log(item.value)
      console.log(item)
      this.$router.push(`/playList/?cat=${item}`)
    },
    // a(){
    //   console.log(1)
    // },
    onClick(url) {
      console.log(url);
      window.location.href = url;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.popular {
  margin: 20px 20px 0 20px;
  padding: 0 0 0px 34px;
  margin-bottom: 30px;
  height: 33px;
  background-image: url(../assets/images/index.png);
  background-position: -225px -156px;
  background-repeat: no-repeat;
  border-bottom: 2px solid #c10d0c;
}

.popular .rmtj-title {
  display: block;
  float: left;
  font-size: 24px;
  font-weight: normal;
  line-height: 28px;
  color: #000;
}

/* 热门推荐小按钮 */
.popular .rmtj-tab {
  float: left;
  margin: 7px 0 0 20px;
}

.popular .rmtj-tab a {
  color: #666;
  font-size: 12px;
}

.popular .rmtj-tab a:hover {
  text-decoration: underline;
}

.popular .rmtj-tab span {
  margin: 0 10px;
  color: #ccc;
}

.popular .more {
  float: right;
  font-size: 12px;
  // margin: 11px 0 0 0;
  // padding: 0 25px 0 0;
  display: block;
  background-image: linear-gradient(rgb(224, 0, 0), rgb(158, 0, 0));
  border-radius: 4px;
  width: 46px;
  height: 29px;
  color: #fff;
  text-align: center;
  line-height: 29px;
}

//123
.el-menu-item{
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.el-menu-demo{
  float:right;
  width: 100px;
  height: 20px;
}
.el-dropdown-link {
  color: #999;
}
.el-dropdown-menu > .el-container {
  width: 170px;
  float: left;
}
.dropdown-sortTitle {
  font-weight: 700;
  color: red !important;
  border-bottom: 1px solid rgb(121, 1, 1);
}

</style>
